@charset "utf-8";


@import "common/common";


.comment{
    position: relative;
    height: 100%;
    background: url(../img/comment/bg.png) no-repeat center;
    background-size: cover;
    section{
        div{
            @include imgoverflow;
        }
        &:first-of-type{
            /**头像**/
            .headimg{
                width: 27.03%;
                border-radius:50% ;
                margin: n(35px) auto n(10px);
            }
            .title{
                width: 74.375%;
                margin: 0 auto;
            }
        }
        /**选项部分**/
        &:nth-of-type(2){
            margin: n(88px) 9.38% n(62px) 6.25%;
            .problem{
                width:48.1%;
                animation: none;
            }
            div{
              animation: pulse 1s infinite alternate;  
            }
            /**选项部分**/
            .option0{
                width: 30.8%;
                margin-top:-(5px) ;
                margin-right: 3.75%;
            }
            .option7{
                width: 24.5%;
                margin: n(65px) 0px 0px 7.41%;
            }
            .option9{
                width: 33%;
                margin: n(-30px) 0px 0px 33.71%;
            }
            .option95{
                width: 35.2%;  
                margin: n(-6px) 0px 0px 64.82%;
            }
        }
        /**底部提交部分**/
        &:last-of-type{
            div{
                margin: 0 auto;
            }
            .commot_title{
                width: 74.84%;
            }
            .bottom_btn{
                font-size: 0;
                div{
                    width: 22.19%;
                    display: inline-block;
                    margin: 0px 3.9%;
                }
            }
            /**文本输入框**/
            textarea{
                width: 77.97%;
                background: none;
                display: block;
                margin: n(18px) auto;
                resize: none;
            }
        }
    }
    /***遮罩层**/
    .masklayer{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        padding-top: n(280px);
        background: rgba(0,0,0,0);
        transform: scale(0, 0);
        transform-origin: center center;
        transition: all .7s ease;
        div{
            @include imgoverflow; 
            margin: 0 auto;
            &.headimg{
                width: 26.25%;
            }
            &.text{
                width: 69.06%;
                margin-top: n(32px);
            }
        }
    }
}
